<template>
  <div class="supplementary-information">
    <el-container>
      <el-header class="header-class" height="22">
        <div class="header-text">Supplementary Information</div>
      </el-header>
      <el-main class="container-main">
        <el-form label-position="left" :model="supplementaryData" :rules="rules" ref="validatorForm" :size="form_size"
                 :label-width="label_width" :show-message="false">
          <el-row>
            <el-col :span="12">
              <el-col :span="12">
                <el-form-item label="QA/UAT Testing Result:" prop="qaTestResult">
                  <permission-slot :labelName="supplementaryData.qaTestResult"
                                   :readOnly=!this.functionList.update_pp_qa_reject>
                    <el-select style="width: 200px" v-model='supplementaryData.qaTestResult' placeholder='Select One'>
                      <el-option v-for='item in qaTestResultOptions' :key='item.appKeyValue' :label='item.appKeyValue'
                                 :value='item.appKeyValue'>
                      </el-option>
                    </el-select>
                  </permission-slot>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <permission-slot class="accepted-text"
                                 :labelName="'Accepted'"
                                 :readOnly="this.supplementaryData.approveQATestResult === 'Yes'">
                  <el-button type="primary" size="small" @click="toApproveQaTestResult"
                             v-if="this.functionList.endorse_reject && this.supplementaryData.qaTestResult === this.noQaTestNeeded && !this.supplementaryData.approveQATestResult">
                    Accept
                  </el-button>
                </permission-slot>
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="12">
                <el-form-item label="Pre-Prod Trial Run Result:" prop="ppTestResult">
                  <permission-slot :labelName="supplementaryData.ppTestResult"
                                   :readOnly=!this.functionList.update_pp_qa_reject>
                    <el-select style="width: 200px" v-model='supplementaryData.ppTestResult' placeholder='Select One'>
                      <el-option
                        v-for='item in ppTestResultOptions' :key='item.appKeyValue' :label='item.appKeyValue'
                        :value='item.appKeyValue'>
                      </el-option>
                    </el-select>
                  </permission-slot>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <permission-slot class="accepted-text"
                                 :labelName="'Accepted'"
                                 :readOnly="this.supplementaryData.approvePPRunResult === 'Yes'">
                  <el-button type="primary" size="small" @click="toApprovePPRunResult"
                             v-if="this.functionList.endorse_reject && this.supplementaryData.ppTestResult === this.noPpTestNeeded && !this.supplementaryData.approvePPRunResult">
                    Accept
                  </el-button>
                </permission-slot>
              </el-col>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="Testing Environment:" prop="testEnvironment">
                <permission-slot :labelName="supplementaryData.testEnvironment"
                                 :readOnly=!this.functionList.update_pp_qa_reject>
                  <el-input type='textarea' :rows='2' v-model='supplementaryData.testEnvironment'>
                  </el-input>
                </permission-slot>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import appKeyService from '@/service/appKey'
import PermissionSlot from '@/base-components/permission/PermissionSlot'
import moment from 'moment'

const PCRS_PP_TRIAL_RUN_RESULT = 'PCRS_PP_TRIAL_RUN_RESULT'
const QA_TESTING_RESULT = 'QA_TESTING_RESULT'
const PP_VALIDATION_MSG = 'Your PP trial run confirmation time is behind the Schedule Date/Time,please change the Schedule Date/Time'
const COMPARE_SCHEDULE_DATE_PP_TRIAL_RUN_RESULT = 'Completed Successful'

export default {
  props: {
    supplementaryData: {
      type: Object,
      default: function () {
        return {
          qaTestResult: '',
          approveQATestResult: '',
          ppTestResult: '',
          approvePPRunResult: '',
          testEnvironment: ''
        }
      }
    },
    changeRequirementData: {
      type: Object
    },
    functionList: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  components: {
    PermissionSlot
  },
  data() {
    return {
      form_size: 'mini',
      label_width: '260px',
      qaTestResultOptions: [],
      ppTestResultOptions: [],
      oldSelectedPpTestResult: '',

      noQaTestNeeded: 'No QA/UAT Testing is needed',
      noPpTestNeeded: 'No Pre-production Trial Run is needed',

      rules: {
        qaTestResult: [
          {required: true, message: 'QA Test Result', trigger: 'change'}
        ],
        ppTestResult: [
          {required: true, message: 'PP Test Result', trigger: 'change'}
        ],
        testEnvironment: [
          {required: true, message: 'Test Environment', trigger: 'change'}
        ]
      }
    }
  },
  created() {
    this.getQaTestResultOptions()
    this.getPpTrialRunResultOptions()
  },
  computed: {
    selectedPpTestResult: {
      get() {
        return this.supplementaryData.ppTestResult
      }
    }
  },
  watch: {
    selectedPpTestResult(newVal, oldVal) {
      if (this.functionList.update_pp_no_control && this.supplementaryData.ppTestResult === COMPARE_SCHEDULE_DATE_PP_TRIAL_RUN_RESULT) {
        if (!this.validateScheduleDate()) {
          this.supplementaryData.ppTestResult = oldVal
        }
      }
    }
  },
  methods: {
    toApproveQaTestResult() {
      this.supplementaryData.approveQATestResult = 'Yes'
    },
    toApprovePPRunResult() {
      this.supplementaryData.approvePPRunResult = 'Yes'
    },
    async getQaTestResultOptions() {
      let appKeys = await appKeyService.getAppKeysResult(QA_TESTING_RESULT)
      this.qaTestResultOptions = appKeys.applicationKeyValueList
    },
    async getPpTrialRunResultOptions() {
      let appKeys = await appKeyService.getAppKeysResult(PCRS_PP_TRIAL_RUN_RESULT)
      this.ppTestResultOptions = appKeys.applicationKeyValueList
    },
    validateScheduleDate() {
      if (this.changeRequirementData) {
        let scheduleDate = this.changeRequirementData.expectedDateChange
        let scheduleHour = this.changeRequirementData.expectedTimeChange.hours
        let scheduleMin = this.changeRequirementData.expectedTimeChange.minutes
        scheduleDate.setHours(parseInt(scheduleHour))
        scheduleDate.setMinutes(parseInt(scheduleMin))
        if (scheduleDate < moment().toDate()) {
          this.$message({
            showClose: true,
            message: PP_VALIDATION_MSG,
            duration: 4000,
            type: 'warning'
          })
          return false
        }
        return true
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import './../../../common/css/base.scss';

  .accepted-text {
    line-height: 28px;
    color: red;
    font-size: 14px;
    margin-left: 15px;
  }

  .container-main {
    border: 1px solid $base-header-color;
  }

  .header-class {
    @include baseHeader(30px)
  }

  .header-text {
    color: #fff;
    margin-top: 5px;
    font-weight: bold;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .row {
    margin: 5px 0px;
  }

  .label-text {
    text-align: center;
    vertical-align: middle;
  }
</style>
